<template>
	<view class="flex_ZC">
		<uNavbar title="搜索" bgColor="#F5F7F5"> </uNavbar>
		<view class="search flex_dq">
			<u-search bgColor="#ffffff" searchIconSize="28" v-model.trim="searchName" :placeholder="placeholder"
				:actionStyle="actionStyle" margin="0 16px 0 0" @clear="clear" @search="changeSearch" animation
				@custom="cilckCustom"></u-search>
		</view>
		<view >
			<view class="history" v-if="historyList.length>0">
				<view class=" flex_ld">
					<text class="f32 c3">搜索历史</text>
					<u-icon name="trash" color="#999999" size="20" @click="isShowDetail = true"></u-icon>
				</view>
				<view class="history_box">
					<text class="" v-for="(item,index) in historyList" :key="index"
						@click="clickHis(item)">{{item}}</text>
				</view>
			</view>
			<view class="history">
				<view class=" flex_ld">
					<text class="f32 c3">热门搜索</text>
				</view>
				<view class="history_box">
					<text class="" v-for="(item,index) in hotList" :key="index" @click="clickHis(item)">{{item}}</text>
				</view>
			</view>
			<view class="history">
				<view class=" flex_ld">
					<text class="f32 c3">商品推荐</text>
				</view>
			</view>
		</view>

		<view class="goods ">
			<view class="goods_box flex_Z" v-for="(item,index) in goodsList" :key="index" @click="goDetails(item.id)">
				<image :src="item.thumb" mode="aspectFill"></image>
				<view class="goods_btm">
					<text class="f28 c3 overflow2">{{item.name}}</text>
					<text class="f24 c0  gradient1 integral">+{{item.integral_proportion}}%More值</text>
					<view class="goods_btm_price flex_ld">
						<view class=" flex_dq">
							<text class="f24 c4">￥</text>
							<text class="f34 c4 fw7 price">{{item.min_price}}</text>
							<text class="f24 c9 delect" v-if="Number(item.max_origin_price) > Number(item.min_price)">￥{{item.max_origin_price}}</text>
						</view>
						<text class="f24 c9" v-if="Number(item.max_origin_price) < Number(item.min_price)" >已抢{{item.total_sales}}件</text>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="isShowDetail" mode="center" @close="isShowDetail = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32 c3">提示</text>
				<view class="user_card flex_dq">
					<text class="f30 c6"> 确定要删除吗？</text>
				</view>
				<view class="btn_xz flex_ld_b">
					<text @click="isShowDetail = false">我再想想</text>
					<text @click="confirmDelete">确认删除</text>
				</view>
			</view>
		</u-popup>
		

		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="goodsList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {recommend,searchHistory,deleteSearch} from "../../api/cloudMall.js"
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				placeholder: '搜索商品/类目/本地商家/团购',
				cursor: 1, //选择哪一分类
				searchName: '',
				jfShow: false,
				jgShow: false,
				isShowDetail:false,
				historyList: [],//历史记录
				hotList: [], //热门
				goodsList: [],//商品列表
				actionStyle: {
					fontSize: '28rpx',
					color: '#FFC300'
				}
			}
		},
		onLoad() {
		},
		onShow() {
			this.searchName = ''
			this.initList()
			this.ishHistory()
		},
		methods: {
			// 下拉刷新清空内容
			refreshArray() {
				this.page = 1,
					this.searchName = '',
					this.goodsList = [],
					this.initList()
			},
			// 初始化
			initList(){
				let data = {
					page:this.page,
					page_size:this.size,
				};
				recommend(data).then(res=>{
					console.log('商品列表',res)
					let list = res.data.data;
					this.goodsList = this.page == 1 ? list : this.goodsList.concat(list);
					console.log(this.goodsList);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			// 搜索历史&热门搜索
			ishHistory(){
				searchHistory().then(res=>{
					console.log('搜索历史',res)
					if(res.code == 1){
						this.historyList = res.data.user_search_history
						this.hotList = res.data.hot_search
						}
					})
			},
			// 删除
			confirmDelete(){
				deleteSearch({type:1}).then(res=>{
					console.log('删除',res)
					if(res.code == 1){
						uni.$u.toast(res.msg)
						this.isShowDetail = false
						this.ishHistory()
						}
					})
			},
			// 清空搜索内容
			clear() {
				console.log('清空内容');
				this.searchName = ''
			},
			// 回车键触发
			changeSearch() {
				console.log('回车键触发');
				this.goSearch()
			},
			// 点击搜索按钮触发
			cilckCustom() {
				console.log('点击搜索按钮触发');
				this.goSearch()
			},
			// 点击历史记录
			clickHis(item) {
				console.log(item);
				this.searchName = item
				this.goSearch()
			},
			goSearch(){
				let info = {
					id: '',
					name: this.searchName,
				}
				uni.setStorageSync('nextFloor', info)
				uni.navigateTo({
					url: '/pagesMy/cloudCat/secondLevelSearch?type=0'
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/goodsDetails?id=' + id
				})
			}

		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.refreshArray()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 690rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 24rpx auto;
	}

	.history {
		width: 690rpx;
		margin: 16rpx 0;
	}

	.history_box {
		display: flex;
		flex-wrap: wrap;
	}

	.history_box>text {
		padding: 6rpx 20rpx;
		line-height: 52rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #333333;
		margin: 20rpx 24rpx 20rpx 0;
	}

	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		margin: 0rpx auto;
	}

	.goods_box {
		width: 336rpx;
		border-radius: 20rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
	}

	.goods_box>image {
		width: 336rpx;
		height: 336rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.goods_btm {
		width: 100%;
		padding: 10rpx;
	}

	.integral {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
	}

	.goods_btm_price {
		margin-top: 20rpx;
	}

	.price {
		margin-right: 6rpx;
	}
	
	
	.prompt {
		width: 600rpx;
		background: #ffffff;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-bottom: 50rpx;
	}
	
	.prompt>text {
		width: 66%;
		margin-top: 70rpx;
		text-align: center;
		line-height: 50rpx;
	}
	
	.user_card {
		margin: 30rpx auto 60rpx;
	}
	
	.btn_xz {
		width: 100%;
	}
	
	.btn_xz>text:nth-child(1) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #333333;
		background: #F2F2F2;
		border-radius: 280rpx;
	}
	
	.btn_xz>text:nth-child(2) {
		width: 220rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 280rpx;
	}
	
	
</style>